<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/swiper-bundle.css">
    <link rel="stylesheet" href="css/search.css">
    <script src="js/swiper-bundle.js"></script>
    <script src="js/jquery-3.6.0.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="container">
            <img src=""
                alt="" width="75px" height="75px" class="one">
            <h2>熊猫优选</h2>
            <div class="center">
                <!-- <img src="images/搜索.jpg" alt=""> -->
                <input type="text" name="shou" placeholder="搜索商品，发现更多优惠">
                <button>搜索</button>
            </div>
            <div class="reg">
                <img src=""
                    alt="" width="40px" height="40px">
                <img src=""
                    alt="" width="40px" height="40px">
                <img src=""
                    alt="" width="40px" height="40px">
            </div>
        </div>
    </div>

    <!-- 导航 -->
    <div class="nav">
        <div class="container">
            <ul>
                <li>
                    <div onclick="onHomePage()">首页</div>
                </li>
                <li>
                    <div onclick="onPage()">9.9包邮</div>
                </li>
                <li><a href="#">超值大额卷</a></li>
                <li><a href="#">降温急救穿搭</a></li>

            </ul>
        </div>
    </div>

    <!-- //动态渲染列表数据 -->
    <div class="list">
        <div class="container">
            <!-- 动态生成 -->
        </div>
    </div>

    <!-- 加载更多 -->

    <div class="btn">
        <button>加载更多</button>
    </div>
    <!-- 回到顶部 -->

    <div class="back">

        <button>
            <span>&it;</span>顶部</button>
    </div>

    <script>
        //点击搜索


        /*选项卡
       1. 设置点击样式
       2. .清除样式
        3.点击事件设置样式*/
        let liEle = $('.nav .container ul>li')

        function onTab() {
            for (let i = 0; i < liEle.length; i++) {
                liEle[i].onclick = function () {
                    clear() //清除样式
                    this.classList.add('active')
                }
            }
        }
        onTab()

        function clear() {
            for (let i = 0; i < liEle.length; i++) {
                liEle[i].classList.remove('active')
            }

        }


        //获取列表数据
        function onProductList(page) {
            $('.header .container .center button').on('click', function () {


                let start = page * 10
                $.ajax({
                    url: "https://xiongmaoyouxuan.com/api/sub_column/7/items?start=" + start,
                    type: 'get',
                    success: function (res) {
                        show(res.data.list)
                        console.log(res)
                    },
                    error: function (error) {
                        console.log(error)
                    }
                })
            })
        }

        //动态喧嚷列表
        let strMore = '' //全局的列表字符串

        function show(productList) {
            let productListStr = productList.map(function (item) {
                return `<div class="show" onclick=onDetail(${item.id})>
                           <img src="${item.image}"
                              width="280px" height="390px" alt="">
                           <div>${item.title}</div>
                           <div class="platform"><span>天猫</span> <span>包邮</span></div>
                           <div class='price'><span>￥${item.price}</span><span>${item.saleNum}人已买</span> <span>${item.couponValue}</span></div>

                       </div>`
            }).join('')
            strMore = strMore + productListStr
            $('.list .container').html(strMore)
        }

        //加载更多
        function more() {
            let page = 1 //页号
            onProductList(page)

            $('.btn').click(function () {
                onProductList(++page)
            })
        }
        more()

        //回到顶部
        $('.back button').click(function () {

            let timer = setInterval(function () {
                document.documentElement.scrollTop = document.documentElement.scrollTop - 100
                if (document.documentElement.scrollTop <= 0) {
                    clearInterval(timer)
                }
            }, 50)
        })
        //跳转到详情页
        function onDetail(id) {

            location.href = 'details.html?id=' + id

        }

        //返回 首页
        function onHomePage() {
            location.href = 'index.html'
        }
        //返回9.9
        function onPage() {
            location.href = '9.9page.html'
        }
    </script>
</body>

</html>